import { ExtractPropTypes } from 'vue'
import { validatorSizeValue, validatorColorValue, validatorTransparentColor, range as validatorRange } from '../../utils'
import { ZIndex } from '../../config'

/**
 * props参数
 */
export const navbarProps = {
  /** 导航栏高度，可以传入数值(默认单位为rpx)，带单位高度信息 */
  height: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 背景颜色 */
  bgColor: {
    type: String,
    default: '#FFFFFF',
    validator: (value: string) => {
      return validatorColorValue("bg", value)
    }
  },
  /** 字体颜色 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 毛玻璃效果, 设置后bgColor属性失效 */
  frostedGlass: {
    type: Boolean,
    default: false
  },
  /** 毛玻璃背景颜色, frostedGlass为true时有效, 必须带透明度 */
  frostedGlassColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorTransparentColor(value)
    }
  },
  /** 显示返回按钮 */
  isBack: {
    type: Boolean,
    default: true
  },
  /** 返回按钮图标(请选择图鸟Icon库中的图标) */
  backIcon: {
    type: String,
    default: 'left'
  },
  /** 返回按钮文本 */
  backTitle: {
    type: String,
    default: ''
  },
  /** 返回按钮回到home页面图标(请选择图鸟Icon库中的图标) */
  backHomeIcon: {
    type: String,
    default: ''
  },
  /** 透明度[0-100]，该样式会影响全部样式的透明度(不针对背景) */
  opacity: {
    type: [String, Number],
    default: 100,
    validator: (value: string | number) => {
      return validatorRange(value, [0, 100])
    }
  },
  /** 显示底部阴影 */
  bottomShadow: {
    type: Boolean,
    default: true
  },
  /** 是否预留胶囊位置 */
  reserveCapsule: {
    type: Boolean,
    default: true
  },
  /** 内容区域是否居中显示 */
  alignCenter: {
    type: Boolean,
    default: true
  },
  /** 点击返回前回调 */
  beforeBack: {
    type: Function,
    default: null
  },
  /** 点击回到首页前回调 */
  beforeHome: {
    type: Function,
    default: null
  },
  /** 首页地址 */
  indexUrl: {
    type: String,
    default: ''
  },
  /** 固定顶部导航栏 */
  fixed: {
    type: Boolean,
    default: false
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ZIndex.navbar
  }
}
export type NavbarProps = ExtractPropTypes<typeof navbarProps>
